<template>
	<div v-if="show" class="comfirm-box">
		<div class="box-wraper">
			<div class="content">
				<div class="body">
					<slot name="body">
						是否拨打 {{ phone }}
					</slot>
				</div>
				<div class="footer">
					<slot name="footer">
						<div class="left" @click="$emit('cancel')">
							取消
						</div>
						<div class="right">
							<!-- <div @click="callPhone">
                拨打
              </div> -->
							<a v-if="showTel==true" @click="callPhone">拨打</a>
							<a v-if="showTel==false" ref="phoneDom" :href="phoneString" style="display:hidden">拨打</a>
						</div>
					</slot>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['show', 'phone'], // eslint-disable-line
		data() {
			return {
				showTel:false
			}
		},
		computed: {
			phoneString() {
				return 'tel:' + this.phone
			}
		},
		mounted(){
				if (this.commonJs.checkTerminal() == 'ios') {
				this.showTel=true;
				
			} else if(this.commonJs.checkTerminal() == 'android'){
			this.showTel=true;
			}else{
				this.showTel=false;
			}
		},
		methods: {
			callPhone() {


				if (this.commonJs.checkTerminal() == 'ios') {
					
					window.webkit.messageHandlers.CallTelephone.postMessage(this.phone)
				} else if(this.commonJs.checkTerminal() == 'android'){
					ZMParentsJsToAndroid.CallTelephone(this.phone)
					setTimeout(() => {
						this.blurAdjust()
					}, 50)
				};


			}
		}
	}
</script>

<style lang="less" scoped>
	.comfirm-box {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.2);
		z-index: 8000;

		.box-wraper {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 100%;

			.content {
				width: 5.4rem;
				background: rgba(255, 255, 255, 1);
				border-radius: 0.1rem;

				.body {
					margin: 0.75rem 0.32rem 0.45rem 0.32rem;
					text-align: center;
					font-size: 0.3rem;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
					line-height: 0.4rem;
				}

				.footer {
					border-top: 0.01rem solid rgba(221, 221, 221, 1);
					display: flex;
					font-size: 0.36rem;

					.left {
						flex: 1;
						width: 50%;
						text-align: center;
						padding: 0.24rem 0;
						border-right: 1px solid rgba(221, 221, 221, 1);
						color: #999999
					}

					.right {
						flex: 1;
						padding: 0.24rem 0;
						width: 50%;
						text-align: center;

						a {
							text-decoration: none;
							color: #89CC4E;
						}
					}
				}
			}
		}
	}
</style>
